<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Spring Boot+Websocket+广播式</title>

</head>
<body onload="disconnect()">
	<noscript>
		<h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2>
	</noscript>
	<div>
		<div>
			<button id="connect" onclick="connect();">连接</button>
			<button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
		</div>
		<div id="conversationDiv">
			<lable>输入你的名字</lable>
			<input type="text" id="name" />
			<button id="sendName" onclick="sendName()">发送</button>
			<p id="response"></p>
		</div>
	</div>
	<script th:src="@{js/jquery-1.8.2.min.js}"></script>
	<script th:src="@{js/stomp.min.js}"></script>
	<script th:src="@{js/sock.min.js}"></script>
	<script type="text/javascript">
		var stompClient = null;
		function setConnected(connected) {
			document.getElementById('connect').disabled = connected;
			document.getElementById('disconnect').disabled = !connected;
			document.getElementById('conversationDiv').style.visibility = connected ? 'visible'
					: 'hidden';
			$('#response').html();
		}
		function connect() {
			var socket = new SockJS('/endpointWisely');
			stompClient = Stomp.over(socket);
			stompClient.connect({}, function(frame) {
				setConnected(true);
				console.log('Connected: ' + frame);
				stompClient.subscribe('/topic/getResponse', function(response) {
					showResponse(JSON.parse(response.body).responsemessage);
				});
			});
		}
		function disconnect() {
			if (stompClient != null) {
				stompClient.disconnect();
			}
			setConnected(false);
			console.log("Disconnected");
		}
		function sendName() {
			var name = $('#name').val();
			stompClient.send("/welcome", {}, JSON.stringify({
				'name' : name
			}));
		}
		function showResponse(message){
			var response=$('#response');
			response.append(message);
		}
	</script>
</body>
</html>